<template>
  <div class="get_tcas">
    <h3>门限阈值</h3>
    <el-form :model="getTca" ref="getTcaForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="12">
          <MeEqPtp/>
        </el-col>
        <el-col :span="4">
          <el-form-item label="周期类型" prop="granularity">
            <el-select v-model="getTca.granularity" placeholder="请选择周期类型">
              <el-option
                  v-for="(i,index) in granularity"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性能参数" prop="pmParameterName">
            <el-cascader v-model="getTca.pmParameterName"
                         :options="options"
                         :props="{ checkStrictly: true }"
                         :show-all-levels="false"
                         clearable
                         @change="handleChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="0">
            <el-button type="primary">确认</el-button>
            <el-button @click="resetForm('getTcaForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
        :data="tcas['tca-parameter'].slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :current-page.sync="currentPage"
        :stripe="stripe"
        style="width: 100%;;margin:0 auto;">
      <el-table-column
          fixed
          sortable
          prop="object-name"
          label="对象名称"
          width="320">
      </el-table-column>
      <el-table-column
          prop="pm-parameter-name"
          label="性能参数">
      </el-table-column>
      <el-table-column
          prop="granularity"
          label="周期类型">
      </el-table-column>
      <el-table-column
          prop="threshold-type"
          label="门限标识">
      </el-table-column>
      <el-table-column
          prop="object-type"
          label="对象类型">
      </el-table-column>
      <el-table-column
          prop="threshold-value"
          label="门限值">
      </el-table-column>
    </el-table>
    <div class="pagination" style="line-height:0px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-button type="primary" style="float: right;margin: 60px" @click="isShow = true">新建</el-button>
    <el-dialog
        :visible.sync="isShow"
        width="500px"
        :close-on-click-modal="false">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">设置性能参数</div>
      </div>
      <TcaParams :name="nodeName"></TcaParams>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import MeEqPtp from "@/components/common/MeEqPtp";
import {options} from "@/assets/config/PerformanceConfig";
import TcaParams from "@/components/performance/TcaParams";

export default {
  name: "Tcas",
  components: {MeEqPtp, TcaParams},
  data() {
    return {
      //表格相关
      stripe: true,//是否为斑马纹 table
      //窗口控制
      isShow: false,
      nodeName: '',
      pageSize: 10,
      currentPage: 1,
      total: 0,
      form: {
        date1: '',
        date2: '',
      },
      granularity: ['1min', '15min', '24h'],
      thresholdType: ['HIGH', 'LOW'],
      options,
      'setTca': {
        "object-name": "PTP=/shelf=1/slot=8/subslot=1/port=101",
        "pm-parameter-name": "",
        "granularity": "",
        "threshold-type": "",
        "object-type": "",
        "threshold-value": "-23.98"
      },
      //查询性能越限阈值
      getTca: {
        objectName: '',
        granularity: '',
        pmParameterName: '',
      },
      tcas: {
        "tca-parameter": [
          {
            "object-name": "端口-2",
            "pm-parameter-name": "PM_FEES",
            "granularity": "15min",
            "threshold-type": "low",
            "object-type": "PTP",
            "threshold-value": "1.69"
          },
          {
            "object-name": "槽道-1 OTN2X8",
            "pm-parameter-name": "RX_PKT_SUM",
            "granularity": "15min",
            "threshold-type": "high",
            "object-type": "EQ",
            "threshold-value": "-96.24"
          }
        ]
      },

    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange(value, e) {
      console.log(value);
      console.log(e);
    },

    async getTcas() {
      this.nodeName = this.$route.params.node;
      if (this.nodeName !== '') {
        await axios.get("/topology/node/" + this.nodeName + "/tca-parameters").then(
            response => {
              if (response.data.hasOwnProperty("errors")) {
                this.$message.error(response.data.errors.error['error-message']);
              }
              if (response.data.hasOwnProperty("tca-parameters")) {
                console.log("请求成功", response.data);
                this.$message.success("获取设备信息成功");
                this.tcas = response.data["tca-parameters"];
                this.total = this.tcas["tca-parameter"].length;

              }

            },
            error => {
              console.log("失败！", error.message);
              this.$message.error(error.message);
            }
        )
      }

    },


    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },

  },
  created() {
    this.getTcas();
  }
}
</script>

<style scoped>

</style>